<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blur Text Test Page</title>
<link rel="stylesheet" href="../../../themes/ui/ui.all.css" type="text/css" media="screen" title="UI Standard">

<script type="text/javascript" src="../../../jquery/src/core.js"></script>
<script type="text/javascript" src="../../../jquery/src/selector.js"></script>
<script type="text/javascript" src="../../../jquery/src/event.js"></script>
<script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
<script type="text/javascript" src="../../../jquery/src/fx.js"></script>
<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
<script type="text/javascript" src="../../dimensions/jquery.dimensions.js"></script>
<script type="text/javascript" src="../ui.mouse.js"></script>
<script type="text/javascript" src="../ui.resizable.js"></script>
<script type="text/javascript" src="../ui.draggable.js"></script>
<style type="text/css" media="all">

body
{
	background: #fff;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 12px;
}

.proxy {
	border: 1px dotted black;	
}

.ui-resizable .ui-resizable-handle { display: block }

.ui-resizable-ne { cursor: ne-resize; width: 10px; height: 10px; }
.ui-resizable-nw { cursor: nw-resize; width: 10px; height: 10px; }

#sampleText {
	margin: 10px;
	font-size: 1.5em;
	width: 400px;
	position:relative;
}

</style>
</head>
<body>

<div id="sampleText">
<div style="position:absolute;">It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.<br/><br/>It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</div>
<div id="outer" style="position:relative;width:0px;height:0px;overflow:hidden;background:white;">
    <div class="inner" style="position:absolute;width:400px;top:0px;left:-1px;opacity:0.04;">It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.<br/><br/>It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</div>
    <div class="inner" style="position:absolute;width:400px;top:2px;left:1px;opacity:0.04;padding-right:2px;">It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.<br/><br/>It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</div>
    <div class="inner" style="position:absolute;width:400px;top:-2px;left:1px;opacity:0.04;padding-right:2px;">It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.<br/><br/>It was a dark and stormy night; the rain fell in torrents, except at occasional intervals, when it was checked by a violent gust of wind which swept up the streets (for it is in London that our scene lies), rattling along the housetops, and fiercely agitating the scanty flame of the lamps that struggled against the darkness.</div>
</div>
<div id="shade" style="position:absolute;width:0px;height:0px;background:white;opacity:0.9;">
</div>
</div>

<div id='window' style='width: 200px; height: 100px; border: 1px solid #50A029; position: relative; position: absolute; top: 20px; left: 500px;'>
<div class='ui-resizable-e ui-resizable-handle'></div>
<div class='ui-resizable-s ui-resizable-handle'></div>
<div class='ui-resizable-se ui-resizable-handle'></div>
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Shade Text</div>
</div>

<div id='blurryWindow' style='width: 200px; height: 100px; border: 1px solid #50A029; position: relative; position: absolute; top: 200px; left: 500px;'>
<div class='ui-resizable-e ui-resizable-handle'></div>
<div class='ui-resizable-s ui-resizable-handle'></div>
<div class='ui-resizable-se ui-resizable-handle'></div>
<div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Blur Text</div>
</div>
	
<script type="text/javascript">
if(!window.console) {
 window.console = {
 	log: function() {
 		alert(arguments[0]);	
 	}	
 }	
}

$(document).ready(function(){

	$('#window').resizable({
		proxy: "proxy",
		minWidth: 100,
		minHeight: 60,
		maxWidth: 500,
		maxHeight: 300,
		handles: {
			e: '.ui-resizable-e',
			s: '.ui-resizable-s',
			se: '.ui-resizable-se'
		},
		stop: function(e,ui) {
			$('#shade').css({width: $(ui.helper).width(), height: $(ui.helper).height()});
		}
	});
	
	$('#blurryWindow').resizable({
		proxy: "proxy",
		minWidth: 100,
		minHeight: 60,
		maxWidth: 500,
		maxHeight: 300,
		handles: {
			e: '.ui-resizable-e',
			s: '.ui-resizable-s',
			se: '.ui-resizable-se'
		},
		stop: function(e,ui) {
			$('#outer').css({width: $(ui.helper).width(), height: $(ui.helper).height()});
		}
	});

	$('#window').draggable({
		handle: "div:not(.ui-resizable-handle)",
		drag: function(ev, ui) {
			$('#shade').css({left: ui.position.left - 10, top: ui.position.top - 10, width: $(ui.helper).width(), height: $(ui.helper).height()});
		}
	});

	$('#blurryWindow').draggable({
		handle: "div:not(.ui-resizable-handle)",
		drag: function(ev, ui) {
			$('#outer').css({left: ui.position.left - 10, top: ui.position.top - 10, width: $(ui.helper).width(), height: $(ui.helper).height()});
			$('.inner').css({"margin-left": -(ui.position.left - 10 - 1), "margin-top": -(ui.position.top - 10 - 1)});
		}
	});


});
</script>
</body>
</html>
